<template>
     <ul class="vv" @click="fn">
        <li>
            <div class="nn"><img :src="crowdfundingImage"></div> 
            <div class="nr">
                <p class="zw">{{crowdfundingName}}</p>
                <div class="xm">
                    <p class="ti">截止时间：{{TT}}</p>
                    <p class="yuan">￥{{crowdfundingPrice}}</p>
                </div>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        data() {
            return {
                id: this.crowdfundingId,
                Time: this.crowdfundingDeadline + '',
            }
        },
        props:{
           crowdfundingName:String, 
           crowdfundingPrice:String,
           crowdfundingDeadline:String,
           crowdfundingId:String,
           crowdfundingImage:String,
        },
        methods: {
            fn(){
                this.$router.push({
                    name: "crowdfunding",
                    params: {
                        id: this.id
                    }
                })
            }
        },
        computed: {
            TT(){
                let times = this.Time.substr(0,10); 
                return `${times}`
            },
        }
    }
</script>

<style lang="scss" scoped>
     ul{
            margin-left: 1px;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 12vw;
        li{
            padding-bottom: 3vw;
            width: 40%;
            flex-grow: 1;
            margin: 8px;
            p{
                text-align: left;
            }
            img{
                width: 92vw;
                height: 60vw;
                padding-left: 1vw;
            }
        }
        .zw{
            font-weight: bold;
            font-size: 4vw;
            padding-top: 4vw;
        }
        .xm{
            position: relative;
            padding-top: 1vw;
            .ti{
                font-size: 3vw;
                position: absolute;
                top: 2vw;
            }
            .yuan{
                position: absolute;
                font-size: 4vw;
                color: red;
                right: 5vw;
            }
        }
    }
</style>